<!DOCTYPE HTML>
<html>
<head>
    <include file="public:headtop"/>
    <link href="/static/css/general.css" rel="stylesheet">
    <link href="/static/css/cate.css" rel="stylesheet">
</head>

<body>
<include file="public:headmini"/>

<div class="container">

    <h2 class="box-title">选择分类：</h2>

    <div class="cate-nav">
    </div>

    <script>
        var cateData = [
            {
                "id": 1,
                "name": "汽车膜",
                "sub": [{"id": 7, "name": "光学隔热膜"}]
            },
            {
                "id": 2,
                "name": "建筑膜",
                "sub": [
                    {"id": 8, "name": "隔热膜"},
                    {"id": 9, "name": "装饰膜"},
                    {"id": 10, "name": "安全膜"},
                    {"id": 11, "name": "雾化膜"},
                ]
            }
        ];
    </script>

    <form action="{:U('/')}" method="get">

        <input type="hidden" name="m" value="book"/>
        <input type="hidden" name="a" value="cate"/>
        <input name="cid" type="hidden" id="cateValue"/>

        <h2 class="box-title">选择参数：</h2>

        <table id="keyForOrder-table">
            <tbody>
            <volist name="selects" id="sel">
                <tr>
                    <td>{$sel}</td>
                    <td><input type="radio" name="{$key}" value="0" checked/>&nbsp;不限</td>
                    <td><input type="radio" name="{$key}" value="99"/>&nbsp;高</td>
                    <td><input type="radio" name="{$key}" value="40"/>&nbsp;中</td>
                    <td><input type="radio" name="{$key}" value="1"/>&nbsp;低</td>
                </tr>
            </volist>
            </tbody>
        </table>

        <div class="action" style="margin-top: 3rem">
            <h3 class="text-center text-red">当前条件下有 <span id="num">0</span> 款产品</h3>
            <button class="btn btn-block">点击查看</button>
        </div>

    </form>

</div>


<script type="text/javascript">
    $(function () {

        var $form = $('form');
        var count = function () {
            $data = $form.serialize();
            //numonly=1 get方式提交表单，仅返回数量
            $.get("{:U('/')}numonly=1&" + $data, function (num) {
                document.getElementById('num').textContent = num;
            });
        };

        var Nav = $('.cate-nav');

        function CateItem(data) {
            this.ul = $('<ul class="cate-nav-item"></ul>');
            this.data = data;
            var self = this;
            for (var i = 0; i < data.length; i++) {
                var cate = data[i];
                var li = $('<li data-cate="' + cate['id'] + '">' + cate['name'] + '</li>');
                li.click(function () {
                    self.onItemClick(this);
                });
                li.appendTo(this.ul);
            }

            this.ul.appendTo(Nav);
        }

        CateItem.prototype.onItemClick = function (liDom) {
            var li = $(liDom);
            if (li.hasClass('active')) return false;
            li.parent().nextAll().remove();
            li.siblings('li').removeClass('active');
            li.addClass('active');

            var subData = this.data[li.index()].sub;
            if (subData) {
                this.sub = new CateItem(subData);
            } else {
                $('#cateValue').val(li.data('cate'));
                count();
            }
        };

        new CateItem(cateData);

        //实时查询数量
        $('input:radio, input[name=cate]').on('change', count);

        //打开页面统计
        count();
    });
</script>
</body>
</html>